<template>
  <div class="pb-20 max-w-screen-x1">
    <!-- 订单标签页 -->
    <div class="bg-white sticky top-0 z-40 shadow-sm">
      <div class="flex">
        <div
            class="flex-1 text-center py-3 cursor-pointer"
            :class="{ 'text-primary-500 border-b-2 border-primary-500 font-medium': activeTab === 'all' }"
            @click="changeTab('all')"
        >
          全部订单
        </div>
        <div
            class="flex-1 text-center py-3 cursor-pointer"
            :class="{ 'text-primary-500 border-b-2 border-primary-500 font-medium': activeTab === 'unpaid' }"
            @click="changeTab('unpaid')"
        >
          待支付
        </div>
        <div
            class="flex-1 text-center py-3 cursor-pointer"
            :class="{ 'text-primary-500 border-b-2 border-primary-500 font-medium': activeTab === 'paid' }"
            @click="changeTab('paid')"
        >
          已支付
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="bg-white">
      <div
          v-for="order in filteredOrders"
          :key="order.id"
          class="border-b p-4"
      >
        <div class="flex justify-between mb-2">
          <span class="text-gray-500 text-sm">订单号: {{ order.orderNumber }}</span>
          <span class="text-primary-500 text-sm font-medium">{{ order.statusText }}</span>
        </div>
        <div class="fix gap-3 mb-2">
          <img :src="order.restaurantImage" alt="" class="w-16 h-16 object-cover rounded">
          <div>
            <h4 class="font-medium">{{ order.restaurantName }}</h4>
            <div class="text-sm text-gray-500 mt-1">
              {{ order.items.length }}件商品
            </div>
          </div>
        </div>
        <div class="fix justify-between items-center py-2 border-t">
          <div>
            <span class="text-sm">实付款:</span>
            <span class="font-medium ml-1">¥{{ order.totalAmount.toFixed(2) }}</span>
          </div>
          <div>
            <button
                v-if="order.status === 'unpaid'"
                class="px-4 py-1 border border-primary-500 text-primary-500 rounded-full text-sm mr-2"
                @click="payOrder(order.id)"
            >
              去支付
            </button>
            <button
                v-if="order.status === 'unpaid'"
                class="px-4 py-1 border border-gray-300 text-gray-500 rounded-full text-sm"
                @click="cancelOrder(order.id)"
            >
              取消订单
            </button>
            <button
                v-if="order.status === 'paid'"
                class="px-4 py-1 border border-gray-300 text-gray-500 rounded-full text-sm"
                @click="viewOrderDetails(order.id)"
            >
              查看详情
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    orderNumber: '202506200001',
    status: 'unpaid',
    statusText: '待支付',
    restaurantName: '万家饺子（软件园E18店）',
    restaurantImage: './img/sj01.png',
    items: [
      { name: '香辣水饺', quantity: 1, price: 18.0 },
      { name: '荠菜肉水饺', quantity: 1, price: 9.0 },
      { name: '猪肉水饺', quantity: 1, price: 6.0 }
    ],
    totalAmount: 33.0,
    createTime: '2025-06-20 12:30:45'
  },
  {
    id: 2,
    orderNumber: '202506190002',
    status: 'paid',
    statusText: '已支付',
    restaurantName: '麦当劳(武林店)',
    restaurantImage: './img/sj03.png',
    items: [
      { name: '巨无霸', quantity: 1, price: 20.0 },
      { name: '麦辣鸡翅', quantity: 2, price: 12.0 },
      { name: '冰可乐', quantity: 1, price: 5.0 }
    ],
    totalAmount: 37.0,
    createTime: '2025-06-19 18:45:20'
  },
  {
    id: 3,
    orderNumber: '202506180003',
    status: 'paid',
    statusText: '已支付',
    restaurantName: '小锅饭豆腐馆（全运店）',
    restaurantImage: './img/sj02.png',
    items: [
      { name: '麻辣豆腐拌饭', quantity: 1, price: 28.0 },
      { name: '麻磨豆腐甄选', quantity: 1, price: 22.0 }
    ],
    totalAmount: 50.0,
    createTime: '2025-06-18 09:15:10'
  }
])

// 活跃标签
const activeTab = ref('all')

// 过滤订单
const filteredOrders = computed(() => {
  if (activeTab.value === 'all') return orders.value
  if (activeTab.value === 'unpaid') return orders.value.filter(order => order.status === 'unpaid')
  if (activeTab.value === 'paid') return orders.value.filter(order => order.status === 'paid')
  return []
})

// 切换标签
const changeTab = (tab) => {
  activeTab.value = tab
}

// 支付订单
const payOrder = (orderId) => {
  alert(`跳转到订单${orderId}的支付页面`)
}

// 取消订单
const cancelOrder = (orderId) => {
  // 找到订单并修改状态
  const orderIndex = orders.value.findIndex(order => order.id === orderId)
  if (orderIndex !== -1) {
    orders.value.splice(orderIndex, 1)
    alert('订单已取消')
  }
}

// 查看订单详情
const viewOrderDetails = (orderId) => {
  alert(`查看订单${orderId}的详情`)
}
</script>